<!-- 我们的优势 -->
<section id="advantages" class="advantage-section section-padding">
  <div class="section-header">
    <h2>我们的优势</h2>
    <div class="subtitle">ADVANTAGE</div>
  </div>
  <div class="advantage-cards">
    <div class="advantage-card">
      <img src="images/icons/advantage1.png" alt="企业全价值链的服务能力" />
      <div class="card-overlay">
        <div class="ad_height">
          <h3>企业全价值链的服务能力</h3>
          <p>经过多年的沉淀与发展，甄成集团已经具备从品牌孵化、新媒体运营、企业管理、到资本运作的企业全价值链服务能力，为客户提供一站式解决方案。</p>
        </div>
      </div>
    </div>
    <div class="advantage-card">
      <img src="images/icons/advantage2.png" alt="强大的资源" />
      <div class="card-overlay">
        <div class="ad_height">
          <h3>强大的资源</h3>
          <p>整合多方优质资源，助力企业实现跨越式发展。</p>
        </div>

      </div>
    </div>
    <div class="advantage-card">
      <img src="images/icons/advantage3.png" alt="丰富的行业经验" />
      <div class="card-overlay">
        <div class="ad_height">
          <h3>丰富的行业经验</h3>
          <p>多年深耕行业，积累了丰富的实战经验和成功案例。</p>
        </div>

      </div>
    </div>
  </div>
  <div class="advantage-stats">
    <div class="stat-item">
      <h4>2014 <span class="stat-item-year">年</span></h4>
      <p>公司创立</p>
    </div>
    <div class="stat-item">
      <h4>15 <span>+</span></h4>
      <p>行业覆盖</p>
    </div>
    <div class="stat-item">
      <h4>40 <span>+</span></h4>
      <p>合作服务方</p>
    </div>
    <div class="stat-item">
      <h4>50 <span>+</span></h4>
      <p>合作销售机构</p>
    </div>
    <div class="stat-item">
      <h4>20 <span>+</span></h4>
      <p>合作权威平台</p>
    </div>
  </div>
</section>

<style>
  /* 我们的优势 */
  .advantage-section {
    background: #fff;
    overflow: hidden;
  }

  .advantage-cards {
    display: flex;
    justify-content: center;
    max-width: 100rem;
    margin: 0 auto 4rem;
    flex-wrap: wrap;
    box-sizing: border-box;
  }

  .advantage-card {
    position: relative;
    width: 33.33%;
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    overflow: hidden;
  }

  .advantage-card.animate-in {
    opacity: 1;
    transform: translateY(0);
  }

  .advantage-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: all 0.6s;
  }

  .advantage-card img:hover {
    scale: 1.05;
  }

  .advantage-card .card-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180.00deg, #00103000 0%, #222132 100%);
    color: #fff;
    padding: 4rem 2rem 2.4rem;

  }


  .advantage-card .card-overlay h3 {
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 3rem;
    color: #f9f9f9;
  }

  .advantage-card .card-overlay {
    transform: translateY(1rem);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .advantage-card:hover .card-overlay {
    transform: translateY(0);
  }

  .advantage-card .card-overlay p {
    font-size: 1rem;
    font-weight: 400;
    color: #f9f9f9;
    line-height: 1.5;
    padding-top: 1.2rem;
    position: relative;
  }


  .advantage-stats {
    display: flex;
    justify-content: center;
    gap: 5rem;
  }

  .stat-item {
    text-align: center;
    width: 13.5rem;
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }

  .stat-item.animate-in {
    opacity: 1;
    transform: translateY(0);
  }

  .stat-item h4 {
    font-family: "Microsoft YaHei Bold";
    font-weight: 700;
    font-size: 3rem;
    color: #002149;
    margin: 0;
    line-height: 3.1875rem;
    height: 3.1875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .stat-item h4 span {
    font-family: "Microsoft YaHei";
    font-weight: 400;
    font-size: 1.625rem;
    color: #002149;
    margin-left: 0.3125rem;
  }

  .stat-item h4 span.stat-item-year {
    font-size: 1.2rem;
    margin-top: 1rem;
    margin-left: 0.4375rem;
  }

  .stat-item p {
    font-size: 1.2rem;
    font-weight: 400;
    color: #232733;
    letter-spacing: 0.075rem;
    margin-top: 0.6rem;
  }



  /* 响应式样式 */
  @media screen and (max-width: 1440px) {
    .advantage-card .card-overlay h3 {
      font-size: 1.2rem;
      line-height: 2rem;
    }
  }

  @media screen and (max-width: 1200px) {
    .advantage-card .card-overlay p {
      font-size: 0.9rem;
    }

    .advantage-cards {
      margin: 0 auto 2rem;
    }

    .stat-item h4 {
      font-size: 2rem;
    }

    .stat-item p {
      font-size: 1rem;
    }
  }

  @media screen and (max-width: 1024px) {}

  @media screen and (max-width: 768px) {
    .advantage-cards {
      flex-direction: column;
      align-items: center;
      padding: 0 1rem;
    }

    .advantage-card {
      width: 100%;
      max-width: 40rem;
      height: 30rem;
      margin-bottom: 0.5rem;
    }

    .advantage-stats {
      flex-wrap: wrap;
      gap: 3rem;
    }

    .stat-item p {
      margin-top: 0;
    }

    .advantage-card {
      height: 25rem;
    }

    .advantage-card .card-overlay {
      padding: 2rem;
    }

    .advantage-card .card-overlay h3 {
      font-size: 1.5rem;
      line-height: 4rem;
    }

    .advantage-card .card-overlay p {
      font-size: 1rem;
    }

    .advantage-cards {
      margin: 0 auto 2rem;
    }

    .advantage-stats {
      display: flex;
      justify-content: left;
      gap: 3rem 0;
    }

    .stat-item {
      width: 46%;
      padding: 0 2%;
    }

    .stat-item h4 {
      font-size: 2rem;
    }

    .stat-item h4 span {
      font-size: 1.25rem;
    }

    .stat-item p {
      font-size: 1rem;
    }
  }
</style>